<template>
	<view class="course">
		<template v-for="(item, index) in list">
			<view class="course-list" :key="index" v-if="index === 0" @tap="courseDetail(item)">
				<view class="video-box">
					<view class="play-btn" @tap.stop="playVideo(item)" v-if="!item.videoPlay">
						<view class="triangle"></view>
					</view>
					<image mode="widthFix" class="cover" :src="item.cover" v-if="!item.videoPlay" />
					<video class="video" v-else :src="item.videos" autoplay controls></video>
				</view>
			</view>
		</template>
		
		<template v-for="(perm, index) in permInfo.common">
			<view class="more" v-if="perm.name === 'isShelf' && perm.status === 1">
				<view class="line"></view>
				更多指引
			</view>
			
			<template v-for="(item, index) in list">
				<view class="course-list" v-if="perm.name === 'isShelf' && perm.status === 1 && index !== 0" @tap="courseDetail(item)">
					<view class="course-item">
						<view class="video-box" v-if="item.type === 0 && item.videos">
							<view class="play-btn" @tap.stop="playVideo(item)" v-if="!item.videoPlay">
								<view class="triangle"></view>
							</view>
							<image
								mode="widthFix"
								class="cover"
								:src="item.cover"
								v-if="!item.videoPlay"
							/>
							<video class="video" v-else :src="item.videos" autoplay controls></video>
						</view>
						<view class="img-box" v-else>
							<image class="cover" :src="item.cover" />
						</view>
						<text class="title">{{ item.title }}</text>
					</view>
				</view>
			</template>
		</template>

		<template v-if="list.length == 0">
			<load-more :empty="true" emptyText="暂无数据" emptyType="record"></load-more>
		</template>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Popup from '@/components/uni/Popup';
import LoadMore from '@/components/LoadMore';
import { mapGetters } from 'vuex';
export default {
	name: 'course-list',
	components: {
		Popup,
		LoadMore
	},
	data() {
		return {
			list: [],
			visible: false,
			videos: null
		};
	},
	onLoad() {
		this.getCourseList();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	computed: {
		...mapGetters(['permInfo'])
	},
	methods: {
		playVideo(item) {
			item.videoPlay = true;
			this.$forceUpdate();
		},
		play(url) {
			this.videos = url;
			this.visible = true;
			setTimeout(() => {
				this.$refs.video.play();
			}, 2000);
		},
		getCourseList() {
			let params = {
				app: 'hf',
				order: 'level',
				sort: 'asc'
			};
			this.$service.common.introduction.list(params).then(res => {
				this.list = res;

				this.list.forEach(item => {
					item.videoPlay = false;
					if (item.images) {
						item.images = item.images.split(',');
					}
				});
			});
		},
		courseDetail(item) {
			if (item.images) {
				this.$Router.push({
					path: '/pages/course/detail',
					query: {
						id: item.id
					}
				});
			} else {
				this.videos = item.videos;
				this.visible = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.course {
	height: 100vh;
	background: #f6f7fa;
	padding: 20rpx;
	padding-bottom: 140rpx;
	.more {
		font-size: 32rpx;
		color: #221d2c;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		.line {
			width: 8rpx;
			background: #221d2c;
			border-radius: 50rpx;
			height: 40rpx;
			display: block;
			margin-right: 30rpx;
		}
	}
	.course-list {
		border-radius: 16rpx;
		overflow: hidden;
		.video-box {
			width: 100%;
			height: 324rpx;
			position: relative;
			@include flexBox(center, center);
			.play-btn {
				width: 68rpx;
				height: 68rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 20rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -34rpx;
				margin-top: -34rpx;
				z-index: 100;
				.triangle {
					transform: rotateZ(45deg);
					border: 14rpx solid #fff;
					border-left: 14rpx solid transparent;
					border-bottom: 14rpx solid transparent;
					content: '';
					position: relative;
					width: 0;
					margin-left: 16rpx;
					margin-top: 20rpx;
					opacity: 0.8;
				}
			}
			.cover {
				width: 100%;
				height: 100%;
			}
			.video {
				width: 100%;
				height: 100%;
			}
		}
		.course-item {
			width: 100%;
			height: 352rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 40rpx;
			.video-box {
				height: 280rpx;
				position: relative;
				.play-btn {
					width: 68rpx;
					height: 68rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 20rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -34rpx;
					margin-top: -34rpx;
					z-index: 100;
					.triangle {
						transform: rotateZ(45deg);
						border: 14rpx solid #fff;
						border-left: 14rpx solid transparent;
						border-bottom: 14rpx solid transparent;
						content: '';
						position: relative;
						width: 0;
						margin-left: 16rpx;
						margin-top: 20rpx;
						opacity: 0.8;
					}
				}
			}
			.img-box {
				height: 280rpx;
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				.cover {
					width: 100%;
					height: 100%;
				}
			}
			.title {
				padding-left: 20rpx;
				font-size: 28rpx;
				color: #221d2c;
				line-height: 72rpx;
			}
		}
	}
}
.video-popup {
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center);
		video {
			height: 86%;
		}
	}
}
</style>
